<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.baseDiv{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.nextDiv{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<img id="imgId" src="./img/list/1.jpg" ><br />		
		<input type="text" name="username" id="" value=""  class="inputstyle"/>
		<button type="button" onclick="doAction();">按钮</button>
		<div id="div1" class="baseDiv"></div>
		<button type="button" onclick="dochange();">改变class</button>
		<br />
		<input type="radio" name="sex" id="sex_man" value="" />男
		<input type="radio" name="sex" id="sex_woman" value="" />女
		
		<br />
		<input type="checkbox" name="" id="pe" value="" />体育
		<input type="checkbox" name="" id="music" value="" />音乐
		<input type="checkbox" name="" id="art" value="" />美术
		<br />
		<button type="button" onclick="chekedTest();">cheked测试</button>
	</body>
	<script type="text/javascript">
		function doAction(){
			var imgObj = document.getElementById('imgId');
			console.log(imgObj.src)
			imgObj.src = "./img/list/2.jpg"
			//
			console.log(imgObj.id)
			var imgList = document.getElementsByTagName('img')
			console.log(imgList[0].id)
			var inputList = document.getElementsByTagName('input')
			console.log(inputList[0].name)
			console.log(inputList[0].className)
			
		}
		function dochange(){
			var div1Obj = document.getElementById('div1');
			div1Obj.className = 'nextDiv';
		}
		function chekedTest(){
			var sex_manObj = document.getElementById('sex_man');
			console.log(sex_manObj)
			
			
			
			var sex_womanObj = document.getElementById('sex_woman');
			console.log("男选中情况： "+sex_manObj.checked)
			console.log("女选中情况： "+sex_womanObj.checked)
			var peObj = document.getElementById('pe');
			var musicObj = document.getElementById('music');
			var artObj = document.getElementById('art');
			console.log("体育选中情况： "+peObj.checked)
			console.log("音乐选中情况： "+musicObj.checked)
			console.log("美术选中情况： "+artObj.checked)
			
			//
			sex_womanObj.checked = true;
			peObj.checked = true;
			
			
			//
			var sexObjs = document.getElementsByName('sex');
			console.log(sexObjs)
		}
	</script>
</html>
